<template>
    <div class="uploader">
        <div class="uploader-item" v-if="type === 'add' || type === 'edit'">
            <el-upload
                :headers="headers"
                class="upload_box"
                :action="'/upload/bmfile/upload'"
                :data="fileData"
                :on-success="handleUploadSuccess"
                :on-error="onError"
                :limit="count"
                :disabled="loading"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileListCopy"
                :before-upload="beforeUpload"
            >
                <!-- :disabled="(loading || !(!count || (count && fileListCopy.length < count)))" -->
                <el-button size="small" v-if="!count || (count && fileListCopy.length < count)" :loading="loading" type="primary" style="height:32px;">点击上传</el-button>
                <el-alert
                    :closable="false"
                    style="line-height: 20px;padding: 4px 10px;background-color: unset;"
                    title="单个文件不能超过10M!"
                    type="warning"
                    show-icon>
                </el-alert>
            </el-upload>
        </div>

        <div class="show-file" v-else>
            <div>
                <div class="link" >
                    <a v-for="(item, index) in fileListCopy" :key="index" class="linka" :href="Url + item.path" target="_blank" download>{{item.name}}</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Url } from '@/api/url'
export default {
    name:'upload',
    props:{
        type:{
            default:'',
        },
        fileList:{
            default:[],
        },
        count:{
            type:Number,
            default:0,
        },
    },
    data(){
        return {
            loading:false,
            Url:Url,
            headers:{
                'Authorization': sessionStorage.getItem('token')
            },
            fileData:{},
            fileListCopy:[],
        }
    },
    watch:{
        fileList:{
            handler(){
                this.$nextTick(()=>{
                    this.fileListCopy = this.fileList
                })
            },
            deep:true,
            immediate: true
        },
    },
    methods:{
        handleUploadSuccess(res) {
            this.loading = false
            if(res.code){
                this.$message.error(res.msg)
            }else{
                this.fileListCopy.push(res.data)
            }
        },
        onError(err) {
            this.$message.error(err.message)
            this.loading = false
        },
        handleRemove(file, fileList) {
            var Index = 0
            this.fileListCopy.map((item,index) => {
                if(item.id == file.id){
                    Index = index
                }
            })
            this.fileListCopy.splice(Index,1)
        },
        handlePreview(file){
            window.open(this.Url + file.path)
        },
        beforeUpload(file) {
            this.loading = true
        },
    },
}
</script>
<style lang='scss' scoped>
.uploader {
    .item-label {
        font-weight: 600;
        width: 130px;
        line-height: 32px;
    }
    .uploader-item {
        display: flex;
    }
}
::v-deep .el-upload {
    text-align: left;
    display: flex;
}
.show-file {
    display: flex;
    align-items: flex-start;
    .linka {
        display: block;
        margin: 0 10px 10px 10px;
        color: #0096ff;
    }
}
</style>